<template>
	<view :class="{'is-allow-submit': allowSubmit}">
		<view class="login-account">
			<view class="la-form-item">
					<view class="title">手机号码</view>
					<view class="form-code">
						<input v-model="formData.mobile" class="input" placeholder="请输入您的手机号码" />
						<view v-if="timer" class="code-btn code-btn-disabled">已发送({{count}})</view>
						<view v-else @click="handleSendCode" class="code-btn">获取验证码</view>
					</view>
				</view>

				<view class="la-form-item">
					<view class="title">验证码</view>
					<input v-model="formData.code" class="input" placeholder="请输入您的短信验证码" />
				</view>
			<view class="login-account__submit">
				<ui-button type="primary" block @click="handleLoginClick">登录</ui-button>
			</view>
		</view>
	</view>
</template>
<script>
import { mapActions } from 'vuex'
import { sendSmsVerifyCode,accountLogin,smsLogin } from '@/apis/account'
import BiSendSmsCode from '@/common/send-sms-code/send-sms-code.vue'
import {showLoading,hideLoading} from '@/utils/message.js'

export default {
	name: 'LoginAccount',
	components: {
		BiSendSmsCode
	},
	props: {
		allowSubmit: {
			type: Boolean,
			default: true
		},
    inviteUserId:{
      type: String,
      default: ''
    }
	},
	data() {
		return {
			showSendSmsCode: null,
			showPasswordInput: null,
			timer: null,
			count: 60,
			formData: {
				code: null,
        mobile: '',
			}
		}
	},
	created () {
	},
	methods: {
		...mapActions([
			'CheckAccountLogin',
			'SetUserLogin'
		]),
		async handleSendCode() {
			if (!this.formData.mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				})
				return
			}
			showLoading('正在获取验证码')
			try {
				const res = await sendSmsVerifyCode(this.formData.mobile)
				console.log("res=============",res);
        if (!res){
          uni.showToast({
            icon: 'none',
            title: '验证码发送失败，请联系客服！'
          });
        }
        if (res===1000){
          setTimeout(() => {
            uni.showToast({
              icon: 'none',
              title: '验证码发送太频繁,请5分钟后再试！'
            });
          }, 1500)
        }else {
          if (res) {
            this.timer = setInterval(() => {
              this.count--
              if (this.count === 0) {
                clearInterval(this.timer)
                this.timer = null
                this.count = 10
              }
            }, 2000)
          }
        }
			} catch {
				uni.showLoading({
					title: '验证码获取失败！'
				})
			}
			hideLoading()
		},
		handleSendSmsCode ({ setSendMethod }) {
			setSendMethod(() => {
				return sendSmsVerifyCode(this.formData.mobile)
			})
		},
		handleLoginClick ({ setCallback }) {
			setCallback(() => {
				if (!this.allowSubmit) {
					uni.showToast({
					  icon: 'none',
					  title: '必须勾选并同意协议后才可以登录'
					});
					return;
				}
				if(!this.formData.code){
					uni.showToast({
						icon: 'none',
						title: '输入验证码'
					});
					return;
				}
				showLoading('正在登录')
				return smsLogin(this.formData).then((res) => {
					this.$emit('success', res)
					hideLoading()
				})
			})
		}
	}
}
</script>

<style lang="less">
.login-account__submit{
	margin-top: 24px;
	position: relative;
}
.login-account {
	padding: 0 40rpx 0;
	box-sizing: border-box;
	.la-form-item {
		margin-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
		}
		.input {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			color: #999999;
			box-sizing: border-box;
		}

		.form-code {
			display: flex;
			align-items: center;

			.code-btn {
				width: 150rpx;
				font-size: 24rpx;
				color: #F47554;
				line-height: 34rpx;
				text-align: right;
			}

			.code-btn-disabled {
				color: #999999;
			}

			.input {
				flex: 1;
			}
		}
	}
}
</style>
